<!-- 申请代金券 -->
<template>
	<view class="wrapper">
		<view class="list">
			<view class="item" v-for="(item,index) in TOOLS" :key="index" @click="toUrl(item.url)">
				<image :src="item.icon"></image>
				<view>{{ item.name }}</view>
				<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/839537d2-1971-4dcc-ace4-8c23f67ffa3f.png"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	// 工具列表
	const TOOLS = ref([
		{ name: '正在发放的卡券', icon: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/3fdcb2cb-dd0c-44a4-beba-a7f46023af3a.png', url: '/pageUser/bindMchCc/myCoupon/viewInfo?state=4' },
		// { name: '已下架的卡券', icon: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/1d308b07-ba75-4324-915c-c9951b4670db.png', url: '/pageUser/bindMchCc/myCoupon/viewInfo?state=5' },
		{ name: '待审核的卡券', icon: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/438fcfd7-1be5-4c7e-9b10-538c8ee9f42e.png', url: '/pageUser/bindMchCc/myCoupon/viewInfo?state=1' },
		{ name: '已结束的卡券', icon: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/976c5f2e-b074-4e35-a3e2-af7ed61f18a7.png', url: '/pageUser/bindMchCc/myCoupon/viewInfo?state=6' },
		{ name: '驳回的卡券', icon: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/0e8600e0-a417-4025-8e28-a66971ea0477.png', url: '/pageUser/bindMchCc/myCoupon/viewInfo?state=3' }
	])
	// 路由跳转
	function toUrl(url){
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="less" scoped>
	@bg-color: #F5F6FA;
	
	.wrapper{
		width: 100%;
		min-height: 100vh;
		background-color: @bg-color;
		padding: 24rpx;
		box-sizing: border-box;
		
		.list{
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			.item{
				display: flex;
				background-color: #fff;
				border-radius: 12rpx;
				padding: 24rpx;
				align-items: center;
				gap: 24rpx;
				justify-content: space-between;
				image{
					&:nth-of-type(1){
						width: 80rpx;
						height: 80rpx;
					}
					&:nth-of-type(2){
						width: 48rpx;
						height: 48rpx;
					}
				}
				view{
					font-weight: bold;
					flex-grow: 1;
				}
			}
		}
	}
	
</style>